<template>
  <div>
    <div>
      品牌名称：<el-input
        size="mini"
        class="cate_sel"
        v-model="searchName"
        :disabled="disabled"
        @keyup.enter.native="searchFn(1)" />
      <el-button
        type="primary"
        size="mini"
        @click="searchFn(1)"
        :disabled="disabled">查询</el-button>
    </div>
    <div class="tab_cont">
      <div style="max-height: 400px; overflow-y: auto">
        <el-table :data="brandList" ref="table" @row-dblclick="handleRowDbClick">
          <el-table-column type="selection" width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.$index"
                ><span></span
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumn"
            :prop="item.key"
            :label="item.name"
            :key="index"
          >
          </el-table-column>
        </el-table>
        <div
          class="pagination-container"
          style="text-align: right; margin-top: 20px"
          v-if="totalPage"
        >
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
      <div class="sel_no">
        <el-radio v-model="radio" :label="-1">未搜索到品牌</el-radio>
        品牌名称：<el-input
          size="mini"
          v-model.trim="brandNameInput"
          class="cate_sel"
          placeholder=""
        ></el-input>
      </div>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="submitFn">确定</el-button>
      <el-button @click="cancelFn">取消</el-button>
    </div>
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';
import paginationMixin from './paginationMixin.js';
import { getByBrandNameService } from '@api/basics/brandManage/brandManage';
export default {
  components: {},
  mixins: [paginationMixin],
  props: {
    disabled: { type: Boolean, default: false },
  },
  data () {
    return {
      tableColumn: [
        { name: '品牌编码', key: 'uuid' },
        { name: '品牌', key: 'brandName' },
        { name: '英文名称', key: 'brandEnName' },
        { name: '品牌描述', key: 'note' }
      ],
      apiObj: {
        // 查询spu
        getPagerByBrand: {
          url: '/sysback/product/collect/getPagerByBrand',
          type: 'post' // 接口请求类型
        }
      },
      brandList: [],
      loading: false,
      radio: -2,
      brandNameInput: '',
      searchName: ''
    };
  },
  computed: {},
  created () {},
  methods: {
    searchFn (curPage) {
      if (curPage) {
        this.currentPage = curPage
      }
      let data = {
        brandName: this.searchName,
        notInUuids: '',
        nowPage: this.currentPage,
        pageShow: this.pageSize
      };

      ApiRequest(
        this.apiObj.getPagerByBrand.url,
        this.apiObj.getPagerByBrand.type,
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1' && res.retData && res.retData.results) {
          this.brandList = res.retData.results;
          this.totalPage = res.retData.totalNum;
        }
      });
    },
    handleRowDbClick (row) {
      let curBrand = {
        // otherBrandName: '',
        brandName: row.brandName,
        brandUuid: row.uuid
      };
      this.$emit('submitConcat', curBrand);
      this.radio = -2;
    },
    async submitFn () {
      if (this.radio === -2) {
        return this.$message.error('请选择品牌！')
      }
      let curBrand = null;
      if (this.radio === -1) { // 未搜索到品牌
        if (!this.brandNameInput) {
          return this.$message.error('请输入品牌名称！');
        }
        const res = await getByBrandNameService(this.brandNameInput, state => { this.loading = state });
        const ret = res?.retData
        if (ret) {
          curBrand = {
            // otherBrandName: '',
            brandName: ret.brandName,
            brandUuid: ret.uuid
          };
        } else {
          curBrand = {
            // otherBrandName: this.brandNameInput,
            brandName: this.brandNameInput,
            brandUuid: ''
          };
        }
      } else { // 搜索框搜索品牌
        let curBrandInfo = this.brandList[this.radio];
        curBrand = {
          // otherBrandName: '',
          brandName: curBrandInfo.brandName,
          brandUuid: curBrandInfo.uuid
        };
      }
      this.$emit('submitConcat', curBrand);
      this.radio = -2;
    }
  }
};
</script>
<style lang="less" scoped>
.cate_sel {
  width: 200px;
  margin-right: 20px;
}
.tab_cont {
  margin: 20px 0;
}
.sel_no {
  margin: 20px 0 20px 13px;
}
/deep/ .has-gutter .el-checkbox {
  display: none;
}
</style>
